{extend name="template/base" /}
{block name="content"}
<div class="page-container">
    {include file="form" /}
    <div class="cl pd-5 bg-1 bk-gray">
        <span class="l">
            {tp:menu menu="delete,recyclebin" /}
        </span>
    </div>
    <div class="cl pd-5 bg-1 bk-gray">
        <form class="form form-horizontal" id="add1" method="post" onsubmit="return false">
            <label><span class="c-red">*</span>房型名称：</label>
            &nbsp;&nbsp;<input type="text" class="input-text" style="width:200px;vertical-align: top;"  placeholder="房型名称" name="room_name" value="{$vo.room_name ?? ''}"  datatype="*" nullmsg="房型名称不能为空" errormsg="房型名称格式错误">

            <label><span class="c-red">*</span>备注：</label>
            <input type="text" class="input-text"  style="width:300px;vertical-align: top;"  placeholder="备注" name="remark" value="{$vo.remark ?? ''}" >
            <button type="submit" class="btn btn-primary radius" onclick="addType()">&nbsp;&nbsp;添加&nbsp;&nbsp;</button>
            <span class="r pt-5 pr-5">
            共有数据 ：<strong>{$count ?? '0'}</strong> 条
            </span>
        </form>
    </div>
    <table class="table table-border table-bordered table-hover table-bg mt-20">
        <thead>
        <tr class="text-c">
            {include file="th" /}
            <th width="70">操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name="list" id="vo"}
        <tr class="text-c">
            {include file="td" /}
            <td class="f-14">
                <a class="btn btn-primary radius mr-5" href="javascript:;" id="cancel{$vo.id}" onclick="editData(this,{$vo.id})"><i class="Hui-iconfont">&#xe647;</i>编辑</a>
                <span id="edit{$vo.id}" style="display: none;">
                    <a class="btn btn-danger radius mr-5" href="javascript:;" onclick="cancelEdit(this,{$vo.id})"><i class="Hui-iconfont">&#xe6a6;</i>取消</a>
                    <a class="btn btn-primary radius mr-5" href="javascript:;" onclick="saveData(this,{$vo.id})"><i class="Hui-iconfont">&#xe600;</i>提交</a>
                </span>
                {tp:menu menu='sdelete' /}
            </td>
        </tr>
        {/volist}
        </tbody>
    </table>
    <div class="page-bootstrap">{$page ?? ''}</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/My97DatePicker/WdatePicker.js"></script>

<script>
    function addType() {
        console.log('你提交了', $('#add1').serializeArray())
        var data = $('#add1').serialize();
        $.ajax({
           type: 'POST',
           url: '/admin/hotel_room_type/addType',
            data: data,
            success: function (ret) {
                if (ret.code == 1){
                    layer.msg(ret.msg);
                } else{
                    layer.msg(ret.msg);
                    location.reload();
                }
            }
        });
    }
</script>

<script>
    // 显示编辑输入框
    function editData(obj, id) {
        // console.log('当前对象', obj);
        // 显示输入框和隐藏文字
        var wen = "#num" + id;
        var shu = "#shu" + id;
        $(wen).css('display','none');
        $(shu).css('display','inline');
        // 隐藏编辑按钮，显示提交和取消按钮
        var edit = "#edit" + id;
        $(edit).css('display','inline');
        $(obj).css('display','none');
        var room_name = "#room_name" + id;
        var room = "#room" + id;
        $(room_name).css('display','none');
        $(room).css('display','inline');
    }
    // 取消编辑
    function cancelEdit(obj, id) {
        // 恢复原来的样子,隐藏输入框和显示数据
        var wen = "#num" + id;
        var shu = "#shu" + id;
        $(wen).css('display','inline');
        $(shu).css('display','none');
        // 显示编辑按钮，隐藏提交和取消按钮
        var edit = "#edit" + id;
        var cancel = "#cancel" + id;
        $(edit).css('display','none');
        $(cancel).css('display','inline');
        var room_name = "#room_name" + id;
        var room = "#room" + id;
        $(room_name).css('display','inline');
        $(room).css('display','none');
    }
    // 保存数据
    function saveData(obj, id) {
        // 获取当前输入框的备注
        var shu = "#shu" + id;
        var num = $(shu).val();
        // 获取房型的名称
        var room = "#room" + id;
        var name = $(room).val();
        // console.log('获取到的数据是：', num);
        // console.log('要提交的id是：', id);
        if (!name){
            layer.msg('房型名称不能为空');
            return false;
        }
        $.ajax({
            type: 'post',
            url: '/admin/hotel_room_type/save',
            data: {id:id, remark:num, room_name: name},
            success: function (ret) {
                if (ret.code == 1){
                    layer.msg(ret.msg)
                }else{
                    layer.msg(ret.msg);
                    location.reload();
                }
            }
        });
    }
</script>
{/block}

